<template>
<div class="shadow-info">
    <div class="two">
        <div class="none" v-if="!dataInfo.shadow.id">
            <i class="el-icon-loading"></i>
        </div>
        <div class="top">
            <ShadowInfo
                :dataInfo="dataInfo.shadow"
                :lastShadow="dataInfo.nextShadow"
                :nextShadow="dataInfo.lastShadow">
            </ShadowInfo>
        </div>
        <div class="title">
            <div class="left">
                <i class="el-icon-s-flag"></i>
                <span>为您推荐相类似的</span>Shadow
            </div>
            <div class="right" @click="$router.push('/create/shadow')">
                <i class="el-icon-circle-plus"></i>
                创建
            </div>
        </div>
        <div class="content">
            <ShadowItem 
                v-for="item in dataInfo.shadowList" 
                :key="item.id"
                :itemData="item">
            </ShadowItem>
        </div>
    </div>

    <div class="three">
        <Search></Search>
    </div>
 
    <div class="four">
        <div class="title">
            你<span>
                <i class="el-icon-star-on"></i>
            </span>了
            <span>{{$store.state.myLike.shadow.length}}</span>
            个<span>Shadow</span>!
        </div>
        <div class="content">
            <LikeShadowItem 
                v-for="item in $store.state.myLike.shadow" 
                :key="item.id"
                :itemData="item">
            </LikeShadowItem>
        </div>
        <div class="other-data">
            <OtherData
                :name="dataInfo.shadow.name"
                :content="dataInfo.shadow.content">
            </OtherData>
        </div>
    </div>
    <Loading
        :state="loading">
    </Loading>
</div>
</template>

<script>
import ShadowInfo from '@/components/shadow/ShadowInfo';
import ShadowItem from '@/components/shadow/ShadowItem';
import LikeShadowItem from '@/components/shadow/LikeShadowItem';
import Loading from '@/components/other/Loading';
import OtherData from '@/components/other/OtherData';
import Search from '@/components/other/Search';
export default {
    components: {
        ShadowItem,LikeShadowItem,ShadowInfo,
        Loading,Search,OtherData,
    },
    data(){
        return{
            dataInfo:{
                shadow:{},
                shadowList:[],
                lastShadow:null,
                nextShadow:null,
            },
            loading:false,
        };
    },
    watch: {
        $route:{
            handler(to){
                if(to.name != "ShadowInfo") return;
                let id = to.params.id;
                this.getDataInfo(id); 
            },
            immediate:true,
        },
    },
    methods:{
        getDataInfo(id=0){
            this.loading = true;
            simpleRoll();
            this.$Api.getShadow({
                id:id,
            }).then((data)=>{
                this.dataInfo = data;
            }).catch(({msg}) =>{
                this.$message.error(msg);
            }).finally(()=>{
                this.loading = false;
            });
        },
    },
}
</script>
<style lang="scss" scoped>
.shadow-info{
    width: 100%;
    display: grid;
    grid-gap: 35px;
    grid-template-rows: min-content 1fr;
    grid-template-areas: "two three" "two four";
    grid-template-columns: 1fr 250px;
    grid-auto-flow:row dense;
    font-size: 1.5rem;
    .two{
        height:fit-content;
        grid-area: two;
        position: relative;
        >.none{
            width:100%;
            margin-bottom:35px;
            position: absolute;
            z-index: 9;
            i{
                font-size: 2.5rem;
            }
        }
        >.top{
            width: 100%;
            height: fit-content;
            box-sizing: border-box;
            border-radius: 5px;
            background-color: white;
            >.container{
                width: 100%;
                height: 100px;
                border-radius: 5px;
                background-color: crimson;
            }
        }
        >.title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 35px;
            width: 100%;
            opacity: 0.8;
            >.left{
                font-size: 1.2rem;
                line-height: 100%;
                text-align: left;
                font-weight: bold;
                i{
                    font-size: 1.3rem;
                    margin-right: 5px;
                }
                span{
                    font-size: 1.05rem;
                    opacity: 0.95;
                    margin-right: 5px;
                }
            }
            >.right{
                font-size: 1.1rem;
                font-weight: bold;
                border-radius: 3px;
                line-height: 100%;
                cursor: pointer;
                display: flex;
                align-items: center;
                transition: all 0.2s;
                i{
                    margin-right: 5px;
                }
            }
        }
        >.content{
            margin-top: 35px;
            display: grid;
            grid-gap:15px;
            grid-template-columns: 1fr 1fr 1fr;
        }
        >.bottom{
            margin-top: 30px;
        }
    }
    .three{
        height: fit-content;
        grid-area:three;
        position: sticky;
        top: 35px;
    }
    .four{
        height: fit-content;
        grid-area:four;
        position: sticky;
        top: 116px;
        >.title{
            font-size: 1.2rem;
            line-height: 1.2rem;
            text-align: left;
            margin-bottom: 10px;
            color: #616194;
            >span{
                font-weight: bold;
                color: #3a3a59;
                margin: 0 5px;
            }
        }
        >.content{
            display: grid;
            grid-gap:10px;
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
        >.other-data{
            margin-top:35px;
        }
    }
}
</style>